<template>
  <view class="user-list">
    <view v-if="users.length === 0" class="empty-list">
      <text>{{ emptyText }}</text>
    </view>
    
    <view v-else class="list-content">
      <view 
        v-for="user in users" 
        :key="user.id" 
        class="user-item"
        @click="navigateToProfile(user.id)"
      >
        <view class="user-info">
          <image class="avatar" :src="user.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
          <view class="info-content">
            <view class="username">{{ user.nickname }}</view>
            <view class="bio">{{ user.bio || '这个人很懒，什么都没写~' }}</view>
          </view>
        </view>
        
        <view class="action-area" v-if="user.id !== currentUserId">
          <follow-button 
            :user-id="user.id"
            :initial-following="user.isFollowing"
            @follow-change="onFollowChange"
          ></follow-button>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      <view v-if="!loading && !hasMore" class="no-more">
        <text>没有更多了</text>
      </view>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/utils/api.js';
import FollowButton from './FollowButton.vue';

export default {
  name: 'UserList',
  components: {
    FollowButton
  },
  props: {
    users: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasMore: {
      type: Boolean,
      default: true
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    }
  },
  data() {
    return {
      currentUserId: null
    };
  },
  created() {
    this.getCurrentUser();
  },
  methods: {
    // 获取当前用户ID
    async getCurrentUser() {
      try {
        const res = await userApi.getCurrentUser();
        if (res.code === 200 && res.data) {
          this.currentUserId = res.data.id;
        }
      } catch (error) {
        console.error('获取当前用户失败:', error);
      }
    },
    
    // 导航到用户主页
    navigateToProfile(userId) {
      uni.navigateTo({
        url: `/pages/user/profile?id=${userId}`
      });
    },
    
    // 关注状态变化
    onFollowChange(isFollowing, userId) {
      this.$emit('follow-change', { userId, isFollowing });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.user-list {
  .empty-list {
    text-align: center;
    padding: 60rpx 0;
    color: #999;
  }
  
  .list-content {
    .user-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .user-info {
        display: flex;
        align-items: center;
        flex: 1;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
          margin-right: 20rpx;
        }
        
        .info-content {
          flex: 1;
          
          .username {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 6rpx;
          }
          
          .bio {
            font-size: 26rpx;
            color: #666;
            @include text-ellipsis;
          }
        }
      }
      
      .action-area {
        margin-left: 20rpx;
      }
    }
  }
  
  .loading, .no-more {
    text-align: center;
    padding: 30rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}
</style>
